<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 修改简单数据类型 修改基本类型值都是重新赋值,所以直接修改即可,一定可以更新视图 都是覆盖操作-->
    <button @click="count++">增加</button>
    <p>{{count}}</p>
    <!-- 修改对象属性 Vue对对象内的所有的属性也进行了深度监听,只要属性值发生改变,也可以重新渲染 -->
    <button @click="setName">修改姓名</button>
    <button @click="setAge">修改年龄</button>
    <button @click="deleteSex">删除性别</button>
    <p>{{person.name}}</p>
    <p>{{person.age}}</p>
    <p>{{person.sex}} </p>
    <!-- 修改数组类型 -->
    <ul>
      <li v-for="item of Arrs">{{item}}</li>
    </ul>
    <!-- 变更的方法  -->
    <button @click="SORT">排序</button>
    <button @click="Push">尾部增加</button>
    <!-- 非变更方法 filter过滤出新数组   concat 给数组拼接元素 返回拼接完成后的数组
    slice切割数组 返回切割后的数组
  -->
    <button @click="Filter">过滤</button>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        count: 0,
        person: {
          name: '罗飞',
          age: 20,
          sex: '男'
        },
        Arrs: ["mark", "jack", "able"]
      }

    },
    methods: {
      setName() {
        // 添加或者修改 第一个参数的需要操作的对象 第二个参数是操作的属性 第三个参数是被添加的值
        Vue.set(this.person, 'name', '王远')
      },
      setAge() {
        Vue.set(this.person, 'age', 22)
      },
      deleteSex() {
        // 删除的第一个参数是需要删除的对象 第二个参数是被删除的属性
        Vue.delete(this.person, 'sex')
      },
      SORT() {
        this.Arrs.sort()
      },
      Push() {
        this.Arrs.push('jacks')
      },
      Filter() {
        this.Arrs = this.Arrs.filter(item => item != "jack")
      }
    }
  })
</script>

</html>